<template>
  <div class="csj-model">
    <Drawer
      title="活动详情"
      width="60%"
      v-model="isShowModel"
      @on-close="close"
    >
      <!-- <Spin size="large" fix v-if="loading"></Spin> -->
      <Form :label-width="120">
        <FormItem label="活动名称 ">
          {{ detailInfo.name }}
        </FormItem>
        <FormItem label="活动创建时间">
          {{ changeTime(detailInfo.created_at) }}
        </FormItem>
        <FormItem label="活动更新时间">
          {{ changeTime(detailInfo.updated_at) }}
        </FormItem>
        <FormItem label="规则图">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="openPreview(imagePrefix(formItem.rule_image))"
          >
            <img class="w100" :src="imagePrefix(formItem.rule_image)" />
          </div>
        </FormItem>
        <FormItem label="活动有效起始时间">
          {{ changeTime(detailInfo.expire_begin_time) }}
        </FormItem>
        <FormItem label="活动有效结束时间">
          {{ changeTime(detailInfo.expire_end_time) }}
        </FormItem>
        <FormItem label="倒计时文字颜色">
          {{ detailInfo.expire_font_color }}
        </FormItem>
        <FormItem label="倒计时时间背景色">
          {{ detailInfo.expire_background_color }}
        </FormItem>
        <FormItem label="活动大背景图">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="openPreview(imagePrefix(formItem.background_image))"
          >
            <img class="w100" :src="imagePrefix(formItem.background_image)" />
          </div>
        </FormItem>
        <FormItem label="活动主页背景色">
          {{ detailInfo.background_color }}
        </FormItem>
        <FormItem label="分享标题">
          {{ detailInfo.share_title }}
        </FormItem>
        <FormItem label="分享内容">
          {{ detailInfo.share_text }}
        </FormItem>
        <FormItem label="分享小图">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="openPreview(imagePrefix(formItem.share_pic))"
          >
            <img class="w100" :src="imagePrefix(formItem.share_pic)" />
          </div>
        </FormItem>
        <FormItem label="分享成功取消按钮">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="
              openPreview(imagePrefix(formItem.share_success_button_image))
            "
          >
            <img
              class="w100"
              :src="imagePrefix(formItem.share_success_button_image)"
            />
          </div>
        </FormItem>
        <FormItem label="分享链接">
          {{ detailInfo.h5_preview_link }}
        </FormItem>
        <FormItem label="左右修饰图">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="
              openPreview(
                imagePrefix(formItem.help_complete_text_left_right_pic)
              )
            "
          >
            <img
              class="w100"
              :src="imagePrefix(formItem.help_complete_text_left_right_pic)"
            />
          </div>
        </FormItem>
        <FormItem label="规则引导按钮图">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="
              openPreview(imagePrefix(formItem.activity_rule_index_image))
            "
          >
            <img
              class="w100"
              :src="imagePrefix(formItem.activity_rule_index_image)"
            />
          </div>
        </FormItem>
        <FormItem label="助力引导按钮图">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="
              openPreview(imagePrefix(formItem.activity_help_index_image))
            "
          >
            <img
              class="w100"
              :src="imagePrefix(formItem.activity_help_index_image)"
            />
          </div>
        </FormItem>
        <FormItem label="助力达成背景图">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="openPreview(imagePrefix(formItem.share_background_image))"
          >
            <img
              class="w100"
              :src="imagePrefix(formItem.share_background_image)"
            />
          </div>
        </FormItem>
        <FormItem label="助力成功按钮图">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="openPreview(imagePrefix(formItem.help_success_image))"
          >
            <img class="w100" :src="imagePrefix(formItem.help_success_image)" />
          </div>
        </FormItem>
        <FormItem label="商品背景图片">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="openPreview(imagePrefix(formItem.product_background_image))"
          >
            <img
              class="w100"
              :src="imagePrefix(formItem.product_background_image)"
            />
          </div>
        </FormItem>
        <FormItem label="产品区域背景色">
          {{ detailInfo.product_image_background_image }}
        </FormItem>
        <FormItem label="助力邀请按钮图">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="
              openPreview(imagePrefix(formItem.product_share_button_image))
            "
          >
            <img
              class="w100"
              :src="imagePrefix(formItem.product_share_button_image)"
            />
          </div>
        </FormItem>
        <!-- <FormItem label="助力标签图">
          <div class="csj-singe-upload wpx100 cup" @click="openPreview(imagePrefix(formItem.help_under_price_pic))">
            <img class="w100" :src="imagePrefix(formItem.help_under_price_pic)">
          </div>
        </FormItem> -->
        <!-- 我的助力页面详情 -->
        <div class="mt20 mb20 fb f14">我的助力页面</div>
        <FormItem label="我的助力标题">
          {{ detailInfo.help_title }}
        </FormItem>
        <!-- <FormItem label="页面背景图">
          <div class="csj-singe-upload wpx100 cup" @click="openPreview(imagePrefix(formItem.help_background_image))">
            <img class="w100" :src="imagePrefix(formItem.help_background_image)">
          </div>
        </FormItem> -->
        <FormItem label="页面背景颜色">
          {{ detailInfo.help_background_color }}
        </FormItem>
        <FormItem label="头像背景色">
          {{ detailInfo.help_photo_background_image }}
        </FormItem>
        <FormItem label="助力成功弹窗图">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="
              openPreview(imagePrefix(formItem.help_button_background_image))
            "
          >
            <img
              class="w100"
              :src="imagePrefix(formItem.help_button_background_image)"
            />
          </div>
        </FormItem>
        <FormItem label="按钮模块图片">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="openPreview(imagePrefix(formItem.help_button_image))"
          >
            <img class="w100" :src="imagePrefix(formItem.help_button_image)" />
          </div>
        </FormItem>
        <FormItem label="拼接发起人文字描述">
          {{ detailInfo.help_button_text }}
        </FormItem>
        <!-- 我的助力页面详情 -->
        <div class="mt20 mb20 fb f14">他的助力页面</div>
        <FormItem label="他的助力标题">
          {{ detailInfo.help_others_title }}
        </FormItem>
        <!-- <FormItem label="页面背景图">
          <div class="csj-singe-upload wpx100 cup" @click="openPreview(imagePrefix(formItem.help_others_background_image))">
            <img class="w100" :src="imagePrefix(formItem.help_others_background_image)">
          </div>
        </FormItem> -->
        <FormItem label="页面背景颜色">
          {{ detailInfo.help_others_background_color }}
        </FormItem>
        <FormItem label="头像背景色">
          {{ detailInfo.help_others_photo_background_image }}
        </FormItem>
        <FormItem label="按钮模块背景图">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="
              openPreview(
                imagePrefix(formItem.help_others_button_background_image)
              )
            "
          >
            <img
              class="w100"
              :src="imagePrefix(formItem.help_others_button_background_image)"
            />
          </div>
        </FormItem>
        <FormItem label="app下载图片">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="openPreview(imagePrefix(formItem.download_app_image))"
          >
            <img class="w100" :src="imagePrefix(formItem.download_app_image)" />
          </div>
        </FormItem>
        <FormItem label="商品兑换完图">
          <div
            class="csj-singe-upload wpx100 cup"
            @click="openPreview(imagePrefix(formItem.goods_exchange_over))"
          >
            <img
              class="w100"
              :src="imagePrefix(formItem.goods_exchange_over)"
            />
          </div>
        </FormItem>
        <!-- <FormItem label="按钮模块文字">
          {{detailInfo.help_others_button_text}}
        </FormItem> -->
      </Form>
    </Drawer>
    <!--图片放大-->
    <csj-image-preview
      v-if="isImagePreview"
      :url="previewUrl"
      :clear="true"
      @close="isImagePreview = false"
    ></csj-image-preview>
  </div>
</template>

<script lang="ts" src="./activity-detail.ts"></script>
